<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-07 20:50:30
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-07 22:34:59
 * @Description: 
-->
<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item v-for="item in article.breadcrumb" :key="item">{{
        item
      }}</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="article-content">
      <h1>{{ article.title }}</h1>
      <UserCard datetime="2022-09-07 20:50:30" />
      <a-divider></a-divider>
      <h2>作业要求：</h2>
      <a-image :src="img" alt="" />
      <a-divider></a-divider>
      <h2>实现：</h2>

      <a-row>
        <a-col :span="12">
          <div v-for="(item, index) in arr" :key="index">
            <ComponentA v-if="index % 2 === 0" :num="item" />
            <ComponentB v-else :num="item" />
          </div>
        </a-col>
        <a-col :span="12">
          <a-space direction="vertical">
            <a-button
              style="width: 100px"
              type="primary"
              @click.prevent="handleA"
              long
              >A +</a-button
            >
            <a-button
              style="width: 100px"
              type="primary"
              @click.prevent="handleB"
              status="success"
              >B -</a-button
            >
            <a-button
              style="width: 100px"
              type="primary"
              @click.prevent="handleC"
              status="warning"
              >C +1</a-button
            >
            <a-button
              style="width: 100px"
              type="primary"
              @click.prevent="handleD"
              status="danger"
              >D -1</a-button
            >
          </a-space>
        </a-col>
      </a-row>

        <a-divider></a-divider>
      <h2>代码:</h2>
      <h3>HTML部分：</h3>
      <pre><code class='language-HTML line-numbers'>{{codeHTML}}</code></pre>
      <h3>JS部分：</h3>

      <pre><code class='language-javascript line-numbers'>{{codejs}}</code></pre>
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive ,onMounted} from "vue";
import UserCard from "@/components/UserCard.vue";
import ComponentA from "@/components/test/ComponentA.vue";
import ComponentB from "@/components/test/ComponentB.vue";
import img from "@/assets/imgs/作业要求2.jpg";
import Prism from "prismjs";

onMounted(() => {
  Prism.highlightAll();
});

const article = {
  breadcrumb: ["Vue练习", "组件间消息传递"],
  title: "组件间消息传递",
};

const arr = ref(
  Array(6)
    .fill(0)
    .map((item) => Math.floor(Math.random() * 100))
    .sort((a, b) => a - b)
);

const handleA = () => {
  arr.value.push(Math.floor(Math.random() * 100));
};

const handleB = () => {
  arr.value.pop();
};

const handleC = () => {
  arr.value.forEach((item, index) => {
    if (index % 2 === 0) arr.value[index]++;
  });
};

const handleD = () => {
    arr.value.forEach((item, index) => {
    if (index % 2 === 1) arr.value[index]--;
  });
};


const codeHTML = `//父组件
<template>
  <a-row>
    <a-col :span="12">
      <div v-for="(item, index) in arr" :key="index">
        <ComponentA v-if="index % 2 === 0" :num="item" />
        <ComponentB v-else :num="item" />
      </div>
    </a-col>
    <a-col :span="12">
      <a-space direction="vertical">
        <a-button
          style="width: 100px"
          type="primary"
          @click.prevent="handleA"
          long
          >A +</a-button
        >
        <a-button
          style="width: 100px"
          type="primary"
          @click.prevent="handleB"
          status="success"
          >B -</a-button
        >
        <a-button
          style="width: 100px"
          type="primary"
          @click.prevent="handleC"
          status="warning"
          >C +1</a-button
        >
        <a-button
          style="width: 100px"
          type="primary"
          @click.prevent="handleD"
          status="danger"
          >D -1</a-button
        >
      </a-space>
    </a-col>
  </a-row>
</template>


// 组件A / B
<template>
  <a-card hoverable :style="{ width: '300px', marginBottom: '20px' }">
    <div
      :style="{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }"
    >
      <span
        :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
      >
        <a-avatar
          :style="{ marginRight: '8px', backgroundColor: '#165DFF' }"
          :size="28"
        >
          A / B
        </a-avatar>
        <a-typography-text>ComponentA / ComponentB</a-typography-text>
      </span>
      <span>{{ props.num }}</span>
    </div>
  </a-card>
</template>`
const codejs = `// 父组件
<script setup>
import { ref, reactive } from "vue";
import ComponentA from "@/components/test/ComponentA.vue";
import ComponentB from "@/components/test/ComponentB.vue";

const arr = ref(
  Array(6)
    .fill(0)
    .map((item) => Math.floor(Math.random() * 100))
    .sort((a, b) => a - b)
);
const handleA = () => {
  arr.value.push(Math.floor(Math.random() * 100));
};
const handleB = () => {
  arr.value.pop();
};
const handleC = () => {
  arr.value.forEach((item, index) => {
    if (index % 2 === 0) arr.value[index]++;
  });
};
const handleD = () => {
    arr.value.forEach((item, index) => {
    if (index % 2 === 1) arr.value[index]--;
  });
};
\<\/script\>


// 组件A / B
<script setup>
const props = defineProps(["num"]);
\<\/script\>`

</script>

<style lang='less' scoped>
img {
  width: 80%;
  min-width: 700px;
  text-align: center;
  margin: 0 auto;
}
</style>
